$(init); //voer uit when ready

function init(){
    /*
    //rightclicking
    $.event.special.rightclick = {
        bindType: "contextmenu",
        delegateType: "contextmenu"
    };
    
    //cellfunctionality        
    $(document).on("rightclick", ".cel", function() {
        //alert("rightclicked");
        //open menu -> wijzigen, verwijderen, ...
        return false;
    });
    */
    
    $(".cel").click(addChildCelTo);       
}

function addChildCelTo(event){
    //this = parent cel div
    var parent = this;
    //alert("clicked:"+parent.id);
    var newcel;
    //$("p:last").text( "left: " + position.left + ", top: " + position.top );
    $(this).clone().attr("id",getNewId).attr("class","cel newCel").html("Nieuw")
    .insertAfter(this).after(function(){ //naar positie van parent en slide naar juiste positie
        //this = new cel div
        this.contentEditable='true'; //celinhoud editable
        newcel = this;
        //alert("id:"+parent.id);
        $(this).position({
            of: "#"+parent.id,
            my: "center center",
            at: "center center",
            offset: 0,
            collision: "none none"
        })
    });
    
    //draw the connection with jsplumb
    var celPointOptions = { isSource:true, isTarget:true }; 
    var cel1Endpoint1 = jsPlumb.addEndpoint(parent.id, { anchor:"BottomCenter" }, celPointOptions );      
    var cel2Endpoint1 = jsPlumb.addEndpoint(newcel.id, { anchor:"TopCenter" }, celPointOptions );
    cel1Endpoint1.setEnabled(false); //disable dragging enzo
    cel2Endpoint1.setEnabled(false);
    
    jsPlumb.connect({ //!! heeft nog een css class mogelijkheid?
        source:cel1Endpoint1,
        target:cel2Endpoint1,
        connector: [ "Straight", 175 ],
        paintStyle:{ lineWidth:15, strokeStyle:'red'}
    });
    $('path').attr('stroke-opacity','0.5');
    
    jsPlumb.animate(newcel.id, {left:"-=0px", top:"-=-200px", opacity:'1'}, { duration:1000, easing:'easeOutBack' });
    
    /*
     * Animate met jsplumb
     *  $(newcel).animate({ //animatie nog aanpassen adhv aantal buren
        top: "-=-75px", // -= relatief tov huidige pos
        left: "-=75px"
    }, 1000);
     */
   
    
    
    
    
    
}

var i = 3; //3 cellen om te beginnen
function getNewId(){
    i++;
    return i;
}

function cellAnimate(){
	//alert("Hello");
}

function duplicateCelBefore(thiscel){
	//nieuw element aanmaken (met class newCel) JQuery, appenden aan this
	//alert('mousedown'); //mousedown is triggered als hij klikt ook
	var newcel = $(thiscel).clone();//.attr("class","newCel")
        $(thiscel).before(newcel); //newcel na this�
        return newcel;
}
